<template>
  <div class="app-container">
    <el-container>
      <!-- 左侧导航栏 -->
      <el-aside width="250px" class="sidebar">
        <div class="nav-title">商家后台</div>
        <el-menu default-active="currentMenuIndex" class="el-menu-vertical" @select="handleMenuSelect">
          <el-menu-item index="1">
            <i class="el-icon-s-shop"></i>
            商品列表
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            查看订单
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧内容区域 -->

        <el-main class="main-content">
          <!-- 商品列表页面 -->
          <div v-if="currentPage === 'productList'">
            
            <el-button type="success" size="medium" @click="addProduct" style="margin-bottom: 20px;">新增商品</el-button>
            
            <el-table
              :data="allProducts"
              ref="productTable"
              @selection-change="handleSelectionChange"
              style="width: 100%"
            >
              <!-- 多选框 -->
              <el-table-column type="selection" width="55"></el-table-column>

              <!-- 商品名称 -->
              <el-table-column prop="productName" label="商品名称" width="200"></el-table-column>

              <!-- 价格 -->
              <el-table-column prop="price" label="价格" width="150"></el-table-column>

              <!-- 库存 -->
              <el-table-column prop="stockQuantity" label="库存" width="150"></el-table-column>

              <!-- 操作列 -->
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button @click="editProduct(scope.row)" type="primary" size="mini">编辑</el-button>
                  <el-button @click="deleteProduct(scope.row)" type="danger" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>


            <el-button
              type="danger"
              size="medium"
              @click="deleteSelectedProducts"
              :disabled="!selectedProducts.length"
              style="margin-top: 20px;"
            >
              删除选中商品
            </el-button>
          </div>
          
         <!-- 编辑商品弹窗 -->
         <el-dialog
            title="编辑商品"
            :visible.sync="editProductDialogVisible"
            width="50%"
          >
            <el-form
              :model="editProductForm"
              :rules="editProductRules"
              ref="editProductForm"
              label-width="120px"
            >
              <!-- 商品名称 -->
              <el-form-item label="商品名称" for="productName">
                <el-input
                  v-model="editProductForm.productName"
                  id="productName"
                  name="productName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <!-- 商品价格 -->
              <el-form-item label="价格" for="price">
                <el-input
                  type="number"
                  v-model="editProductForm.price"
                  id="price"
                  name="price"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <!-- 商品库存 -->
              <el-form-item label="库存数量" for="stockQuantity">
                <el-input
                  type="number"
                  v-model="editProductForm.stockQuantity"
                  id="stockQuantity"
                  name="stockQuantity"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <!-- 隐藏商品 ID -->
              <input
                type="hidden"
                v-model="editProductForm.productId"
                id="productId"
                name="productId"
              />

              <!-- 提交按钮 -->
              <el-form-item>
                <el-button type="primary" @click="submitEditProduct">保存</el-button>
                <el-button @click="editProductDialogVisible = false">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>




          <!-- 查看订单页面 -->
          <div v-if="currentPage === 'viewOrders'">
          <!-- 订单筛选 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>订单筛选</span>
            </div>
            <el-row class="filter-row">
              <el-button
                type="primary"
                plain
                @click="filterOrders('all')"
                class="filter-btn"
                :class="{ active: selectedTab === 'all' }"
              >
                全部订单
              </el-button>
              <el-button
                type="success"
                plain
                @click="filterOrders('new')"
                class="filter-btn"
                :class="{ active: selectedTab === 'new' }"
              >
                新订单
              </el-button>
              <el-button
                type="warning"
                plain
                @click="filterOrders('inProgress')"
                class="filter-btn"
                :class="{ active: selectedTab === 'inProgress' }"
              >
                正在进行的订单
              </el-button>
              <el-button
                type="info"
                plain
                @click="filterOrders('history')"
                class="filter-btn"
                :class="{ active: selectedTab === 'history' }"
              >
                历史订单
              </el-button>
            </el-row>
          </el-card>

          <!-- 订单列表 -->
          <el-card class="box-card table-card">
            <div slot="header" class="clearfix">
              <span>订单列表</span>
            </div>
            <el-table :data="filteredOrders" style="width: 100%; margin-top: 20px">
              <el-table-column prop="orderId" label="订单编号" width="150" />
              <el-table-column prop="username" label="收货人" width="120" />
              <el-table-column prop="phoneNum" label="联系电话" width="150" />
              <el-table-column prop="deliveryAddress" label="收货地址" width="200" />
              <el-table-column prop="products" label="商品详情" width="300" >
              </el-table-column>
              <el-table-column prop="totalPrice" label="总价" width="120">



              <template #default="scope">
                <span>￥{{ scope.row.totalPrice }}</span>
              </template>
            </el-table-column>




              <!-- <el-table-column
                label="总价"
                width="120"
              >
                <template slot-scope="scope">
                  <div>¥{{ scope.row.quantity * scope.row.price }}</div>
                </template>
              </el-table-column> -->
              <el-table-column prop="orderCode" label="溯源码" width="200" />
              <el-table-column prop="createTime" label="创建时间" width="180" />
              

              <!-- 操作按钮列 -->
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <!-- 新订单操作 -->
                  <el-button v-if="selectedTab === 'new' "type="success" size="small" @click="acceptOrder(scope.row)">
                    接单
                  </el-button>

                  <el-button v-if="selectedTab === 'inProgress'" type="primary" size="small" @click="completeAndDispatchOrder(scope.row)">
                    完成并派单
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page="currentPageIndex"
              :total="filteredOrders.length"
              @current-change="handlePageChange"
              style="margin-top: 20px"
            />
          </el-card>
        </div>
        </el-main>
      </el-container>

    <!-- 新增商品弹窗 -->
    <el-dialog title="新增商品" :visible.sync="addProductDialogVisible" width="500px">
      <el-form :model="addProductForm" ref="addProductForm" label-width="100px">
        <el-form-item label="商品名称" prop="productName" :rules="[{ required: true, message: '请输入商品名称', trigger: 'blur' }]">
          <el-input id="productName" v-model="addProductForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price" :rules="[{ required: true, message: '请输入商品价格', trigger: 'blur' }]">
          <el-input id="price" v-model="addProductForm.price"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="stockQuantity" :rules="[{ required: true, message: '请输入商品库存', trigger: 'blur' }]">
          <el-input id="stockQuantity" v-model="addProductForm.stockQuantity"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addProductDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddProduct">提交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'MerchantView',
  data() {
    return {
      userid:'',//用户id
      currentPage: 'productList',
      currentPageTitle: '商品列表',
      currentMenuIndex: "1", // 默认选中菜单项
      allProducts: [],   //用户的商品列表
      dialogVisible: false,
      productDialogVisible: false,
      editProductDialogVisible: false,
      addProductDialogVisible : false,  //新增商品弹窗状态
      currentPage: 'viewOrders',
      selectedTab: 'new', // 当前选中的订单筛选标签
      selectedProducts: [], // 存储选中的商品（用于批量操作）
      selectedTab: 'all',
      userid:null, //用于存储当前登录用户的userid
      orderId:null,
      orders:[],
      inProgressOrders: [],//进行中的订单
      historyOrders: [],    //历史订单
      filteredOrders: [],   //当前显示的订单
      pageSize: 5,
      currentPageIndex: 1,
     
      editProductForm: {
        productId:null,
        productName: '',
        price: '',
        stock: '',
      },
      // 用于新增商品的表单数据
      addProductForm: {
        productName: '',
        price: '',
        stockQuantity: '',
      },

      editProductRules: {
      productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
      price: [
        { required: true, message: '请输入商品价格', trigger: 'blur' },
        { type: 'number', min: 0, message: '价格必须为正数', trigger: 'blur' },
      ],
      stockQuantity: [
        { required: true, message: '请输入库存数量', trigger: 'blur' },
        { type: 'number', min: 0, message: '库存数量必须为正整数', trigger: 'blur' },
      ],
    },
      selectedProduct: null,
      editingProduct: null, // 当前正在编辑的商品
    };
  },
  computed: {
    paginatedOrders() {
      const start = (this.currentPageIndex - 1) * this.pageSize;
      return this.filteredOrders.slice(start, start + this.pageSize);
    },
  },
  created(){
    //从路由参数中获取用户id
    this.userid=this.$route.params.userid;
    //打印当前用户ID，测试时使用
    console.log('路由参数中的用户 ID:', this.$route.params.userid);
    if (this.userid) {
      // 如果用户 ID 存在，加载订单
      this.fetchOrders();
    } else {
      console.error('用户未登录，无法获取订单');
    }
    //从用户id加载订单数据
    this.loadProducts();  //调用加载商品的方法
    //在组件创建时初始化默认视图
    this.handleMenuSelect('1');
    
  },
  mounted(){
     // 页面加载时获取订单数据
     if (this.userid) {
      this.fetchOrders();
    } else {
      console.error('用户未登录，无法获取订单');
    }
  },
  methods: {
    handleMenuSelect(index) {
      if (index === '1') {
        this.currentPage = 'productList';
        this.currentPageTitle = '商品列表';
      } else if (index === '2') {
         this.currentPage = 'viewOrders';
        this.currentPageTitle = '查看订单';
        this.filterOrders('all'); // 默认显示全部订单
      }
      this.currentMenuIndex = index; // 同步菜单选中状态
      
    },


// 获取订单数据
  async fetchOrders() {
    try {
      console.log('Fetch Orders - this.userid:', this.userid);

      // 检查 userid 是否有效
      if (!this.userid) {
        this.$message.error('用户未登录或用户 ID 丢失，无法获取订单');
        console.error('用户未登录或用户 ID 丢失');
        return;
      }

      // 调用后端接口获取订单
      const response = await this.$axios.get('/getStoreOrders', {
        params: { 
          userid: this.userid // 将用户ID作为请求参数
        }
      });

      if (response.data.code === '200') {
        const orderData = response.data.data || []; // 确保数据存在，避免空数据报错
        this.orders = []; // 清空现有数据
        this.inProgressOrders = [];
        this.historyOrders = [];

        // 解析订单数据并提取 content 中的字段
        orderData.forEach(order => {
  let content = {};
  try {
    // 尝试解析 content 字段
    content = typeof order.content === 'string' ? JSON.parse(order.content) : order.content;
  } catch (error) {
    console.error('订单内容解析失败，跳过此订单:', order, error);
    return; // 跳过解析失败的订单
  }

  const { 
    username = '未知用户', 
    phoneNum = '无号码', 
    deliveryAddress = '无地址', 
    products = [], 
    orderTime = '未知时间', 
    totalprice = '0.00' // 提取 totalPrice，默认值为 0.00
  } = content;

  const formattedOrder = {
    orderId: order.id || '未知ID', // 订单ID
    orderCode: order.code || '未知溯源码', // 订单溯源码
    username,
    phoneNum,
    deliveryAddress,
    products,
    orderTime,
    totalPrice: totalprice, // 添加总价字段
    createTime: order.createTime || '无创建时间', // 创建时间
    operationType: order.operationType || 0 // 默认值为 0
  };

          // 根据订单的状态进行分类存储
          switch (order.operationType) {
            case 1: // 新订单
              this.orders.push(formattedOrder);
              break;
            case 2: // 进行中订单
              this.inProgressOrders.push(formattedOrder);
              break;
            default: // 历史订单或其他
              this.historyOrders.push(formattedOrder);
              break;
          }
        });

        // 调用 filterOrders 方法来更新 filteredOrders
        this.filterOrders(this.selectedTab);
      } else {
        // 错误处理：接口返回非 200 的 code
        this.$message.error('获取订单失败：' + (response.data.msg || '未知错误'));
        console.warn('后端返回错误信息:', response.data);
      }
    } catch (error) {
      // 异常处理：网络问题或后端接口异常
      console.error('获取订单失败:', error);
      this.$message.error('获取订单失败，请检查网络或稍后再试');
    }
  },

// 根据不同类型过滤订单
  filterOrders(type) {
    this.selectedTab = type;
    if (type === 'all') {
      this.filteredOrders = [...this.orders, ...this.inProgressOrders, ...this.historyOrders];
    } else if (type === 'new') {
      this.filteredOrders = this.orders.filter(order => order.operationType === 1); // 新订单
    } else if (type === 'inProgress') {
      this.filteredOrders = this.inProgressOrders.filter(order => order.operationType === 2); // 进行中
    } else if (type === 'history') {
      this.filteredOrders = this.historyOrders;
    } else {
      this.filteredOrders = []; // 无匹配类型时返回空
    }
  },
  //接单
    // 接单方法
  async  acceptOrder(order) {
  this.$confirm(`确定要接单编号为 ${order.orderId} 的订单吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        console.log('发送的订单数据:', { orderId: order.orderCode });
        // 调用后端接单接口
        const response = await this.$axios.post('/merchantAcceptOrder', {
          orderId: order.orderCode,
        });
        console.log('接单响应:', response);

        if (response.status === 200 && response.data === '商家接单成功' ) {
          // 更新本地数据
          const updatedOrder = { ...order, operationType: 2 }; // 复制对象，确保引用变化
          const newOrders = this.orders.filter(o => o.orderId !== order.orderId);
          const newInProgressOrders = [...this.inProgressOrders, updatedOrder];

          // 使用响应式更新
          this.orders = newOrders;
          this.inProgressOrders = newInProgressOrders;

          // 直接设置选中标签和过滤
          this.selectedTab = 'inProgress';
          this.filterOrders('inProgress');


          // 提示用户接单成功
          this.$message.success(`订单 ${order.orderId} 已接单！`);
        } else {
          // 后端返回错误信息
          this.$message.error(`接单失败：${response.data.msg || '未知错误'}`);
          await this.fetchOrders();
        }
      } catch (error) {
        console.error('接单请求失败', error);
        const errorMsg = error.response?.data?.msg || error.message || '接单失败，请稍后再试';
        this.$message.error(errorMsg);
      
      // 可能需要重新获取最新订单数据
        await this.fetchOrders();
      }
    })
    .catch(() => {
      // 用户取消操作
      this.$message.info('接单已取消');
    });
},
     // 完成并派单操作
// 完成并派单操作
    completeAndDispatchOrder(order) {
    
      this.$confirm(`确定要完成订单编号为 ${order.orderId} 并派单吗？`, '提示', {
        confirmButtonText: '完成并派单',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            // 首先打印localStorage中的所有信息
            console.log('全部localStorage:', localStorage);
            // 获取商家ID（即用户ID）
            const merchantId = localStorage.getItem('userId'); // 从 localStorage 获取商家ID
            

            // 检查商家 ID 是否有效
            if (!merchantId) {
              this.$message.error('商家ID缺失,无法完成订单操作');
              return;
            }

            // 调用后端接口完成订单
              const response = await this.$axios.post('/merchantOkOrder', {
              orderId: order.orderCode, // 传递订单溯源码
              merchantId: parseInt(merchantId, 10), // 将商家ID转换为整数
            });
            //调试确认传递的参数是否正确
            console.log('Request payload:', { orderId: order.orderCode, merchantId });
            console.log('完成订单响应:', response);


            // 判断后端返回的结果
            if (response.status === 200 && (response.data.code === '200'|| response.data === '完成订单并派单成功' )) {
              // 更新订单状态为历史订单
              order.status = '历史订单'; 
              this.historyOrders.push(order); // 添加到历史订单
              this.inProgressOrders = this.inProgressOrders.filter(o => o.orderId !== order.orderId); // 从进行中订单移除

              this.$message.success(`订单 ${order.orderId} 已完成并派单！`);
              this.filterOrders('inProgress');
            } else {
              this.$message.error(`完成订单失败：${response.data.msg|| '未知错误'}`);
              this.filterOrders('inProgress');
            }
          } catch (error) {
            console.log('当前userid:', this.userid);
            console.error('完成订单请求失败', error);
            this.$message.error('完成订单请求失败，请稍后再试');
            const errorMsg = error.response?.data?.msg || error.message || '完成订单请求失败，请稍后再试';
            this.$message.error(errorMsg);
            this.filterOrders('inProgress');
          }

          // 刷新进行中订单列表
          this.filterOrders('inProgress');
        })
        .catch(() => {
          this.$message.info('操作已取消');
        });
    },

  //加载商品列表
    loadProducts() {
        this.$axios
          .post('/getProduct', { merchantId: this.userid }) // 调用后端接口
          .then((response) => {
            console.log('Response:', response.data); // 打印接口响应
            console.log('用户id:', this.userid);
            if (response.data && response.data.code === '1') {
              // 数据加载成功
              this.allProducts = response.data.o || []; // 后端返回的商品列表存储到allProducts
              console.log("Fetched products:", this.allProducts); // 验证是否包含 productId
            } else {
              this.$message.error(response.data.msg || '加载商品列表失败');
            }
          })
          .catch((error) => {
            console.error(error);
            this.$message.error('请求失败，请稍后再试');
          });
      },
    
      //新增商品弹窗
      addProduct() {
        this.addProductDialogVisible = true;
        // 清空表单数据
        this.addProductForm = {
          productName: '',
          price: '',
          stockQuantity: '',
        };
        if (this.$refs.addProductForm) {
        this.$refs.addProductForm.resetFields(); // 清空校验状态
      }
      },
      //新增商品方法
      submitAddProduct() {
        // 表单校验
        this.$refs.addProductForm.validate((valid) => {
          if (!valid) {
            this.$message.error('请检查表单信息是否完整');
            return;
          }

          // 获取商家 ID（从本地存储中获取）
          const merchantId = localStorage.getItem('userId');
          if (!merchantId) {
            this.$message.error('商家信息缺失，请重新登录');
            return;
          }

          // 构造提交数据，确保数据完整
          const newProduct = {
            productName: this.addProductForm.productName,
            price: Number(this.addProductForm.price), // 转为数字类型
            stockQuantity: Number(this.addProductForm.stockQuantity), // 转为数字类型
            merchantId: merchantId, // 商家 ID，用于关联商品
          };

          // 发起新增商品请求
          this.$axios
            .post('/addProduct', newProduct) // 后端接口路径
            .then((response) => {
              const res = response.data;

              if (res.code === '1') {
                // 添加商品成功
                this.$message.success(res.msg || '商品添加成功');
                this.addProductDialogVisible = false; // 关闭新增商品弹窗

                // 重新加载商品列表
                this.loadProducts(); // 重新加载商品列表，确保展示最新商品数据
              } else {
                // 提示失败信息
                this.$message.error(res.msg || '添加商品失败');
              }
            })
            .catch((error) => {
              console.error('添加商品失败:', error);
              this.$message.error('请求失败，请稍后再试');
            });
        });
      },
     //编辑商品的弹窗
    editProduct(product) {
      // 打开编辑弹窗并加载当前商品信息
      this.editProductDialogVisible = true;
      // 保存当前正在编辑的商品（以便后续更新用）
      this.editingProduct = { ...product }; // 深拷贝，避免直接引用导致原始数据被篡改
      // 将商品信息加载到表单中
      this.editProductForm = {
        productId: product.productId, // 确保有唯一标识
        productName: product.productName,
        price: product.price,
        stockQuantity: product.stockQuantity,
      };  
    },
    submitEditProduct() {
  // 表单校验
    this.$refs.editProductForm.validate((valid) => {
      if (!valid) {
        this.$message.error('请检查表单信息是否完整');
        return;
      }

      // 获取商家 ID（从本地存储中获取）
      const merchantId = localStorage.getItem('userId');
      if (!merchantId) {
        this.$message.error('商家信息缺失，请重新登录');
        return;
      }

      // 构造提交数据，确保数据完整
      const updatedProduct = {
        productId: this.editProductForm.productId, // 商品唯一标识
        productName: this.editProductForm.productName,
        price: Number(this.editProductForm.price), // 转为数字类型
        stockQuantity: Number(this.editProductForm.stockQuantity), // 转为数字类型
        merchantId: merchantId, // 商家 ID，用于关联商品
      };

      // 发起更新请求
      this.$axios
        .post('/updateProduct', updatedProduct) // 后端接口路径
        .then((response) => {
          const res = response.data;

          if (res.code === '1') {
            // 更新商品列表中的数据
            const index = this.allProducts.findIndex(
              (product) => product.productId === updatedProduct.productId
            );
            if (index !== -1) {
              this.$set(this.allProducts, index, { ...updatedProduct });
            }

            // 提示成功并关闭弹窗
            this.$message.success(res.msg || '商品编辑成功');
            this.editProductDialogVisible = false; // 关闭编辑弹窗
            // 重新获取商品列表
            this.loadProducts(); // 重新加载商品列表
          } else {
            // 提示失败信息
            this.$message.error(res.msg || '编辑商品失败');
          }
        })
        .catch((error) => {
          console.error('编辑商品失败:', error);
          this.$message.error('请求失败，请稍后再试');
        });
    });
  },
    // 删除单个商品
    deleteProduct(product) {
    this.$confirm(`确定要删除商品 "${product.productName}" 吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        // 向后端发送请求删除商品
        this.$axios
          .post('/deleteProduct', { productId: product.productId }) // 假设后端接口接收 productId
          .then((response) => {
            const res = response.data;
            if (res.code === '1') {
              // 删除成功，从商品列表中移除该商品
              const index = this.allProducts.findIndex(item => item.productId === product.productId);
              if (index !== -1) {
                this.allProducts.splice(index, 1);  // 从数组中删除商品
              }
              this.$message.success('商品已删除');
            } else {
              this.$message.error('删除商品失败');
            }
          })
          .catch((error) => {
            console.error('删除商品失败:', error);
            this.$message.error('请求失败，请稍后再试');
          });
      })
      .catch(() => {
        this.$message.info('删除已取消');
      });
  },
    // 处理多选框选择事件
    handleSelectionChange(val) {
      this.selectedProducts = val;
    },
// 批量删除选中的商品
    deleteSelectedProducts() {
      if (!this.selectedProducts.length) {
        this.$message.warning('请选择要删除的商品');
        return;
      }

      this.$confirm('确定要删除选中的商品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const productIds = this.selectedProducts.map(product => product.productId);

          // 调用后端接口进行批量删除
          this.$axios
            .post('/deleteMultiple', productIds)
            .then(response => {
              const res = response.data;
              if (res.code === '1') {
                // 删除成功：直接从前端更新商品列表
                this.allProducts = this.allProducts.filter(
                  product => !productIds.includes(product.productId)
                );

                // 成功提示
                this.$message({
                  message: res.msg || '选中的商品已删除',
                  type: 'success',
                  duration: 3000,
                  showClose: true,
                });

                // 清空选择
                this.selectedProducts = [];
                this.$refs.productTable.clearSelection();
                //重新获取商品列表
                this.loadProducts();
              } else {
                this.$message.error(res.msg || '批量删除商品失败');
              }
            })
            .catch(error => {
              console.error('批量删除失败:', error);
              this.$message.error('请求失败，请稍后再试');
            });
        })
        .catch(() => {
          this.$message.info('删除已取消');
        });
     },
    

    handlePageChange(page) {
      this.currentPageIndex = page;
    },

  },
};
</script>

<style scoped>
.app-container {
  height: 100vh;
  background-color: #f5f7fa;
}

.sidebar {
  background-color: #FFA500;
  color: #333;
  
}

.nav-title {
  text-align: center;
  font-size: 24px;
  color: #fff;
  padding: 20px;
}

.header {
  background-color: #fff;
  color: #333;
  padding: 20px;
  border-bottom: 1px solid #eaecef;
}

.main-content {
  padding: 20px;
  font-size: 16px;
}

.box-card {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 10px;
}

.filter-row {
  display: flex;
  gap: 10px;
}

.filter-btn {
  border-radius: 20px;
}

.table-card .el-table {
  border: 1px solid #ebeef5;
  border-radius: 5px;
}
</style>
